<script setup>
import {ref} from 'vue'
import {artSetChannelsService,artEditChannelsService} from '@/api/article.js'


const formRef=ref({})
const dialogVisible=ref(false)
const formModel=ref({
	//弹窗输入内容
	cate_name:'',
	cate_alias:''
})
//配置input组件规则
const rules={
	cate_name:[
		{required:true,message:'请输入分类名称',trigger:'blur'},
		{
			pattern:/^\S{1,10}$/,
			message:'分类名称必须1-10为非空字符',
			trigger:'blur'
		}
	],
	cate_alias:[
		{required:true,message:'请输入分类别名',trigger:'blur'},
		{
			pattern:/^[0-9A-Za-z]{1,15}$/,
			message:'分类名称必须1-15字符',
			trigger:'blur'
		}
	]
}


	// 组件对外暴露方法open
const open=(row)=>{
	console.log(row);
	dialogVisible.value=true
	formModel.value={...row}  //添加表单-->重置了内容   编辑表单--->回显了数据
}

//提交编辑或者分类
//编辑过后立马更新
const emit=defineEmits(['success'])
const onSubmit=async()=>{
	await formRef.value.validate()  //首先等待校验
	const isEdit=formModel.value.id   //
	if(isEdit){
		const res=await artEditChannelsService(formModel.value)
		ElMessage.success('编辑成功')
		console.log(res);
		dialogVisible.value=false
	}else{
		const res=await artSetChannelsService(formModel.value)
		ElMessage.success('编辑成功')
		console.log(res);
		dialogVisible.value=false
	}
	emit('success')
}


//暴露的使用方法
defineExpose({
	open
})
</script>

<template>
	<!-- 如果点击了按钮，得到了id就是编辑，否则就是添加 -->
	<el-dialog
	  v-model="dialogVisible"
	  :title="formModel.id?'编辑分类':'添加分类'"
	  width="500"
	>
	  <!-- <span>我是内容部分</span> -->
		<el-form :model="formModel" label-width="100px" style="padding-right: 30px;" :rules="rules" ref="formRef">
			<el-form-item label="分类名称" prop="cate_name">
				<el-input placeholder="请输入分类名称" v-model="formModel.cate_name"></el-input>
			</el-form-item>
			<el-form-item label="分类别名" prop="cate_alias">
				<el-input placeholder="请输入分类别名" v-model="formModel.cate_alias"></el-input>
			</el-form-item>
		</el-form>
	  <template #footer>
	    <div class="dialog-footer">
	      <el-button @click="dialogVisible = false">取消</el-button>
	      <el-button type="primary" @click="onSubmit">
	        确定
	      </el-button>
	    </div>
	  </template>
	</el-dialog>
	
</template>



<style>
</style>